<template>
  <el-tree
      :data="menuAll"
      calss="tree-border"
      empty-text="加载中，请稍等"
      show-checkbox
      :props="propsf"
      ref="treeRef"
      :default-expand-all="props.ShowMenuData.deptExpand"
      @check-change="updateMenu"
      v-if="spinning"
      :default-expanded-keys="props.MenuF"
      :default-checked-keys="props.MenuF"
      :check-strictly="!props.ShowMenuData.deptFather"
      @node-click="handleNodeClick"
      check-on-click-node="true"
      expand-on-click-node="false"
      node-key="id"
  />
</template>

<script lang="ts" setup>
import type Node from 'element-plus/es/components/tree/src/model/node'
import {defineProps, nextTick, onUpdated,onMounted, ref,Ref } from "vue";
import axios from "axios";
const props =defineProps ({
  ShowMenuData: {
    type: Object,
  }, MenuF: {
    type: Object,
  },
});
const treeRef = ref()
const spinning =ref(true)
console.log(props.ShowMenuData.deptExpand,"props")
const menuAll =ref();
onMounted(()=>{
  //请求获取所有的menu
  const url = "http://localhost:1688/login/allMenu";
  axios.get(url).then((data)=>{
    menuAll.value = data.data.data;
  })
})

const handleNodeClick =(data)=>{
  defaultMenu()

}
const updateMenu =(data,v,c)=>{
}
function returnMenu(){
  const checkedKeys = treeRef.value.getHalfCheckedKeys();
  const halfCheckedKeys =treeRef.value.getCheckedKeys();
  const menuArray =checkedKeys.concat(halfCheckedKeys)
  console.log(menuArray,"y")
  return menuArray;
}
interface Tree {
  name: string
}
const roleAllMenu =ref([{

}])
const propsf = {
  label: 'menuName',
  children: 'menuList',
}
//刷新展开 和 父子联动
const  isFold=() => {
  spinning.value = false;
  nextTick(() => {
    spinning.value = true;
  });
}
//菜单默认值
const defaultMenu =()=>{

  console.log(props.MenuF)
  // props.ShowMenuData.menuList.forEach(data=>{
  //   treeRef.value.setCheckedKeys(data.menuId,true,false)
  // })
}
const childMethod = () => {

  isFold()
}
defineExpose({ childMethod,returnMenu,defaultMenu })
const handleCheckChange = (
    data: Tree,
    checked: boolean,
    indeterminate: boolean
) => {
  console.log(data, checked, indeterminate)
}

const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
  if (node.level === 0) {
    return resolve([{ name: 'Root1' }, { name: 'Root2' }])
  }
  if (node.level > 3) return resolve([])

  let hasChild = false
  if (node.data.name === 'region1') {
    hasChild = true
  } else if (node.data.name === 'region2') {
    hasChild = false
  } else {
    hasChild = Math.random() > 0.5
  }


}
</script>
